<template>
	<view class="content">
		<!-- banner -->
		<bannerItem :bannerImg="swpArr"></bannerItem>
		<!-- 导航栏 -->
		<view class="nav">
			<navItem v-for="(item,index) in navArr" :key="index" :navItem='item' :size = 'size'></navItem>
		</view>
		<!-- 小卡片 -->
		<view class="small-cart">
			  <u-row customStyle="margin-bottom: 10px" gutter="40rpx">
			    <u-col span="6">
			         <view class="demo-layout bg-purple-light">
						<view class="left-cart">
							<view class="text-top">待办事项</view>
							<view class="text-bottom">我的待办事项</view>
						</view>
					 </view>
			            </u-col>
			                <u-col span="6">
			                    <view class="demo-layout bg-purpl">
									<view class="right-cart">
										<view class="text-top">办事指南</view>
										<view class="text-bottom">办事指南汇总</view>
									</view>
								</view>
			            </u-col>
			        </u-row>
		</view>
		
		<!-- 喇叭 -->
		<view class="broadcast">
			  <u-row customStyle="margin-bottom: 10px" gutter="10rpx">
			    <u-col span="1">
			        <view class="demo-layout bg-purple-light">
						<view class="broadcast-left">
							<image src="../../static/imgs/broadcast.png" mode=""></image>
					</view>
					</view>
			            </u-col>
			                <u-col span="8">
			                    <view class="demo-layout bg-purple">
									<view class="broadcast-right"><text>关于系统上线运行时间</text></view>
								</view>
			            </u-col>
			        </u-row>
			
			
		</view>
		
		<!-- 大图片 -->
		<view class="experience">
			  <u-row>
			    <u-col span="6">
			        <view class="demo-layout bg-purple-light">
						<view class="experience-text">
							<view class="experience-text-top"><text>办事新体验</text></view>
							    <view class="experience-text-middle">
								   <text>新增办事指南和消息栏目</text>
								   <text>办事更便捷</text>
								</view>
								<view class="experience-bth"><text>去了解</text></view>
						</view>
					</view>
			    </u-col>
			    <u-col span="6">
			        <view class="demo-layout bg-purple">
						<view class="experience-pic">
							<image src='../../static/imgs/newfeel.png' mode="widthFix"></image>
						</view>
					</view>
			    </u-col>
			 </u-row>	
		</view>
		
		<!-- 推荐应用 -->
		<view class="recommended">
			<view class="recommended-title">
				<text>推荐应用</text>
			</view>
			<view class="recommended-description">
				<text>根据您最近浏览和办理应用为您推荐</text>	
			</view>
			<view class="recommended-content">
				<recommendedItem v-for="(item,index) in recommendedArr" :key="index" :recommendeItem='item'></recommendedItem>
			</view>	
		</view>
		
		<!-- 新闻 -->
		<view class="new">
			<view class="new-titleList" :style="">
			    <view  v-for="(item,index) in titleArr" :key="index" class="new-titleList-item" :class="titleIndex===index ? 'active-new-title':''" @click="getNewItem(index)"><text>{{item}}</text></view>
			</view>
			<newItem v-for="(item,index) in itemNewArr.newList" :newitem='item' :newStyle='indexStyle'></newItem>
		</view>
	</view>
</template>

<script>
import { log } from 'util'
	export default {
		data() {
			return {
				swpArr:['../../static/imgs/swItem1.jpg','../../static/imgs/swItem2.jpg','../../static/imgs/swItem3.jpg'],
				//图片尺寸以及每个List尺寸
				size:{
					imgWidth:32,
					imgHeight:32,
					picWidth:72,
					picHeight:72,
				},
				//导航新闻数据数组
				navArr:[
						{
						img:'../../static/imgs/school.svg',
						title:'学校概况',
						bgCloor:'#f6b059'
						},
						{
							img:'../../static/imgs/score.svg',
							title:'成绩查询',
							bgCloor:'#8f6aff'
						},
						{
							img:'../../static/imgs/club.svg',
							title:'缴费入口',
							bgCloor:'#ec1e71'
						},
						{
							img:'../../static/imgs/danger.svg',
							title:'学院入口',
							bgCloor:'#03e391'
						},
						{
							img:'../../static/imgs/all.svg',
							title:'全部',
							bgCloor:'#1e9dff'
						},
				],
				//推荐新闻数据数组
				recommendedArr:[
					{
						title:'成绩查询',
						img:'../../static/imgs/grades.svg',
						description:'查询当前及历史成绩',
						bgColor:'#1ed395',
						look:'200+'
					},
					{
						title:'图书借阅',
						img:'../../static/imgs/books.svg',
						description:'查看图书借阅记录',
						bgColor:'#fe9716',
						look:'100+'
					},
					{
						title:'网上查询',
						img:'../../static/imgs/money.svg',
						description:'自助网上缴费',
						bgColor:'#239ee6',
						look:'150+'
					},
					{
						title:'学校预警',
						img:'../../static/imgs/danger.svg',
						description:'查看学院预警信息',
						bgColor:'#c4423a',
						look:'200+'
					},
				],	
				//头部新闻数据数组
				titleArr:['通知公告','学校新闻','综合信息','学术动态'],
				//头部索引
				titleIndex:0,
				// 单个新闻数据数组
				itemNewArr:[],
				//首页新闻数据
				indexStyle:{
					//上边距
					mt:30,
					//下边距
					mb:20,
					//阴影
					bs:'none',
					//内边距
					pad:0
				},
				//全部新闻数据数组
				newArr:[
					{
						newList:[
							{
								headline:'关于加强新生入学后校园安全管理规范的通知',
								from:'学校新闻网',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'关于开展2023新生入学教育系列培训课程指导意见',
								from:'信息化管理中心',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'关于加强新生入学后校园安全管理条例实行的通知',
								from:'教务处',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'【万千气象看云南】西双版纳一个傣族村寨的“美丽”日记',
								from:'腾讯新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'玉渊谭天：美财长来谈，先要想清楚几个问题',
								from:'腾讯新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'男孩“想当农业发展银行行长继承家产”，家人身份披露：并不都是行长',
								from:'腾讯新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'现场视频！南部战区位中缅边境我方一侧举行联合实兵实弹演习',
								from:'腾讯新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'斐济总理：中国援助在地区发展中发挥重要作用',
								from:'微博新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'喊着“自由市场”实际“美国优先”',
								from:'微博新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
					{
						newList:[
							{
								headline:'外媒：白宫称，沙利文因“肋骨骨折”推迟原定访问',
								from:'微博新闻',
								img:'../../static/imgs/item3.png'
							},
							{
								headline:'福特中国任命贾鸣镝为林肯中国总裁',
								from:'微博新闻',
								img:'../../static/imgs/item2.png'
							},
							{
								headline:'沙特超-C罗连场帽子戏法 利雅得胜利8-0艾卜哈',
								from:'微博新闻',
								img:'../../static/imgs/item1.png'
							},
						]
					},
				]
				
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'智慧校园'
			})
			//默认是第零个
			this.itemNewArr = this.newArr[0]
			
			console.log(this.$store.state.user.userInfo)
		},
		methods: {
			getNewItem(index){
				this.itemNewArr = this.newArr[index]
				this.titleIndex = index
			}
		},
		
	}
</script>

<style scoped lang="scss">
	.content{
		padding: 0 60rpx;
	}
	.nav{
		display: flex;
		justify-content: space-evenly;
		margin-top: 20rpx;
		gap: 15rpx;
	}
	.small-cart{
		margin-top: 20rpx;
		
		.left-cart{
			width: 100%;
			height: 180rpx;
			border-radius: 20rpx;
			background-color: rgba(255, 143, 103, 1);
			background-image: url('/static/imgs/man.png');
			background-size: 80%;
			background-repeat: no-repeat;
			background-position: -26rpx  18rpx;
			text-align: right;
			padding: 52rpx 34rpx 0rpx 0;
			box-sizing: border-box;
			.text-top{
				font-size: 20rpx;
				color: #fff;
			}
			.text-bottom{
				font-size: 20rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
		
		.right-cart{
			width: 100%;
			height: 180rpx;
			border-radius: 20rpx;
			background-color: rgba(147, 247, 219, 1);
			background-image: url('../../static/imgs/woman.png');
			background-size: 80%;	
			background-repeat: no-repeat;
			background-position: 94rpx 6rpx;
			padding: 56rpx 0rpx 0rpx 26rpx;
			box-sizing: border-box;
			
			.text-top{
				font-size: 20rpx;
				color: #fff;
			}
			.text-bottom{
				font-size: 20rpx;
				color: #fff;
				margin-top: 10rpx;
			}
		}
	}
	
	.broadcast{
		margin-top: 40rpx;
		
		.broadcast-left{
			background-color: #03e391;
			border-radius: 40rpx;
			text-align: center;
			
			image{
				width: 25.8rpx;
				height: 25.8rpx;
			}
		}
	}
	
	.experience{
		border-radius: 20rpx;
		margin-top: 50rpx;
		box-shadow: 0px 3px 3px rgba(0, 0, 0, .2);
		
		.experience-text{
			padding: 40rpx;
			box-sizing: border-box;
			
			.experience-text-top{
				
				text{
					font-size: 32rpx;
					font-weight: YSHaoShenTi;
					color: rgb(16, 16, 16);
					font-weight: 400;
						
				}
			}
			
			.experience-text-middle{
				margin-top: 10rpx;
				
				text{
					font-size: 20rpx;
					color: rgb(154, 154, 154);
				}
			}
			
			.experience-bth{
				
				text{
					display: inline-block;
					width: 100rpx;
					height:40rpx;
					line-height: 40rpx;
					text-align: center;
					background-color: rgba(94, 206, 235, 1);
					font-size: 20rpx;
					color: #fff;
					border-radius: 50rpx;
					margin-top: 40rpx;
				}
			}
		}
		
		.experience-pic{
			width: 100%;
			
			image{
				width: 100%;
				object-fit: cover;
			}
		}
	}
	
	.recommended{
		margin-top: 60rpx;
		// margin-bottom: 50rpx;
		.recommended-title{
			margin-bottom: 15rpx;
			
			text{
				font-size: 36rpx;
				font-weight: 700;
				font-family: PingFangSC;
			}
		}
		.recommended-description{
			text{
				font-size: 24rpx;
				color: #868686;
		  }
		}
		.recommended-content{
			display: flex;
			overflow-x: scroll;
			gap: 10rpx;
		}
   }
   
   .new{
	   margin-top: 50rpx;
	   
	   .new-titleList{
	   	   display: flex;
	   	   align-items: center;
	   	   gap: 20rpx;
	   	   
	   	   .new-titleList-item{
	   		   text{
	   			   font-size: 28rpx;
	   			   font-weight: 600;
	   		   }
	   	   }
	   }
   }
   
 
   
   
   .active-new-title{
	   font-weight: 600;
	   border-bottom: 2px solid #03e391;
	   margin-bottom: 10rpx;
	   
	   text{
		   font-size: 36rpx !important;
	   }
	   
   }
</style>
